<template>
  <section class="ld">
     <div class="goback">
      <div @click="goback">
        <img src="../../assets/other/gobackW.png" alt="">
        <span>
          返回
        </span>
      </div>
    </div>    
    <section class="_head">
      <span class="ledouNum">
        {{mAcount.ryjj || 0}}
      </span>
      <div class="useFund" @click="useFund">立即使用</div>
    </section>
    <section class="record">
      交易记录
    </section>
    <dl class="record_list"     
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="50"
      infinite-scroll-immediate-check ="loading">
      <dd v-for="(acountlist,index) in acountlist" :key="index">
        <section class="record_left">
          <span class="record_tit">
            {{
              acountlist.note
            }}
          </span>
          <span class="record_time">
            {{
              acountlist.assessmentmonth | formatDate
            }}
          </span>
        </section>
        <section class="record_right">
          <div>
            <span>
              {{
              acountlist.type | judegAM
              }}
            </span>
            <span class="money">
              {{
              acountlist.money / 100
              }}
            </span>
          </div>
          <div class="blankE">0</div>
        </section>
      </dd>
    </dl>
    <!-- 加载动画 -->
    <loadmore  v-show="loadingDom"></loadmore>
  </section>
</template>
<script>
  import { getAccountAmount, getBBlRecord } from '../../libs/interface'
  import loadmore from '../../components/loadmore'
  import { userInfoGet } from '../../libs/publicMethod'
  export default {
    components: { getAccountAmount, getBBlRecord, loadmore, userInfoGet },
    data () {
      return{
        goName: '返回',
        mAcount: [], // 用户账户
        acountlist:[], // 乐豆使用记录
        loading: false, // 下拉
        loadingDom: false, // 下拉
        offset: 0, // 下拉加载条数
      }
    },
    mounted(){
      document.body.style.paddingBottom = '60px'
      // 获取用户乐豆
      let params = {
        memberid: userInfoGet().id
      }
      getAccountAmount(params, (data)=>{
        if (data.code ==1) {
          this.mAcount = data.payload
        } else {
          this.$toast(data.msg)
        }
      })
      // 获取乐豆使用记录
      let paramsLd = {
        memberid: userInfoGet().id,
        offset: this.offset,
        limit: 10
      }
      getBBlRecord(paramsLd, (data)=>{
        if (data.code ==1) {
          this.acountlist = data.payload
        } else {
          this.$toast(data.msg)
        }
      })
    },
    methods:{
      goback () {
        let vm = this
        if (vm.URL) {
          vm.$router.push({path:vm.URL})
        } else {
          vm.$router.back(-1)
        }
      },
      useFund () {
        this.$router.push('/sellAgain/-1')
      },
      loadMore(){
        let vm = this
        vm.loading = true;
        vm.loadingDom = true;
        vm.offset=10 + vm.offset;
        let params = {
          memberid: userInfoGet().id,
          offset: this.offset,
          limit: 10
        }
        getBBlRecord(params, (data)=>{       
          if (data.code == 1 && data.payload.length>0) {
            // vm.acountlist = data.payload
            vm.$nextTick(()=>{
              data.payload.forEach((item) => {              
                vm.acountlist.push(item);
              })
            })
            vm.loading = false;
          }else{
            this.loading = true;
            vm.offset-=10;
            vm.$toast('暂未请求到数据,请稍后再试')
          }
          vm.loadingDom = false;
        })
      }
    },
    filters:{
      judegAM(text){
        if (text == 1 || text == 2 || text == 6 || text == 7 || text == 10 || text == 12 || text == 14 || text == 16 || text == 17 || text == 18 || text == 19 || text == 20){
          return '+'
        }
        return '-';
      },
      formatDate(input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
        var hour = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        return  year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
      }
    }
  }
</script>
<style scoped>
  a{
    color: #333;
  }
  .ld{
    position:absolute;
    width: 100%;
    height: 100%;
  }
  /* 返回 */
.goback{
   padding: .5rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   text-align: center;
   align-items: center;
   width: 100%;
    position: absolute;
   background: none;
   z-index: 1;
   color: white;
   box-sizing: border-box;
 }
 .goback img{
   padding-right: .5rem;
   height: 1rem;
 }
 .goback div{   
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   text-align: center;
   align-items: center;
 }
 .goback section{
  font-size:0.8rem;
  color:rgba(102,102,102,1);
 }
 /* 头部 */
 ._head{
   width: 100%;
   height: 25%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background:linear-gradient(90deg,rgba(215,64,64,1) 0%,rgba(255,114,121,1) 100%);
 }
 .ledouNum{
   font-size: 2rem;
   color:rgba(255,255,255,1);
   text-shadow: 1px 2px 2px 2px rgba(215,64,64,1);
   margin-bottom: .5rem;
 }
 .useFund{
  padding: .3rem 1rem;
  font-size: 1rem;
  border: none;
  background:rgba(255,255,255,1);
  border-radius:1rem;
  box-shadow:0px 2px 0px 0px rgba(194,52,52,1);
  outline: none;
  font-weight:bold;
  color:rgba(215,64,64,1);
 }
 .recharge{
  padding: .3rem 1rem;
  font-size: 1rem;
  border: none;
  background:rgba(255,255,255,1);
  border-radius:1rem;
  box-shadow:0px 2px 0px 0px rgba(194,52,52,1);
  outline: none;
  font-weight:bold;
  color:rgba(215,64,64,1);
 }
 .record{
   padding: .5rem;
   text-align: left;
   font-size: .8rem;
   background: white;
   margin-bottom: .2rem;
 }
 /* 记录列表 */
 .record_list dd{
   padding: .8rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;  
   background: white; 
 }
 .record_left{
  display: flex;
  width: 80%;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
 }
 .record_left .record_tit{
  font-size: 1rem;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
 }
 .record_left .record_time{
   font-size: .8rem;
   color: #999;
 }
 .record_time{
   margin-top: .2rem;
 }
.record_right{
  font-size: 1rem;
  font-weight: bold; 
}
.blankE{
  color: rgba(0,0,0,0)
}
</style>
